<template>
  <div class="recordDetail">
    <Navbar appTitle="检查汇报" />
    <!--头部-->
    <div class="d-header">
      <div class="content">
        <div class="left">
          <div class="title">任务编号：{{ detailInfo.taskCode }}</div>
          <div class="row limitRow" style="margin-top: 0.1rem">
            <span class="r-label limitLabel">故障设备：</span>
            <span class="r-column limitColumn"
              >{{ detailInfo.deviceCode || "--" }} |
              {{ detailInfo.deviceName || "--" }}</span
            >
          </div>
          <div class="row limitRow" style="margin-top: 0.1rem">
            <span class="r-label limitLabel">设备类别：</span>
            <span class="r-column limitColumn">{{
              detailInfo.deviceCategoryText || "--"
            }}</span>
          </div>
          <div class="row limitRow" style="margin-top: 0.1rem">
            <span class="r-label limitLabel">方案名称：</span>
            <span class="r-column limitColumn">{{
              detailInfo.programName || "--"
            }}</span>
          </div>
        </div>
      </div>
    </div>

    <div
      class="search-content wrap-apply"
    >
      <van-cell-group
        style="margin-top: 0.1rem"
        v-for="(p, i) in messDeviceCheckTaskItemList"
        :key="i"
      >
        <p
          class="label otherText"
          style="display: flex; justify-content: space-between"
        >
          点巡检项目（{{ i + 1 }}）<span
            style="font-weight: 400; color: #ff4d4f"
            @click="messDeviceCheckTaskItemList.splice(i, 1)"
            v-if="messDeviceCheckTaskItemList.length > 1"
            >删除</span
          >
        </p>
        <div class="bottomLine"></div>
        <p class="label FormTit"><span></span>点巡检项</p>
        <van-field readonly placeholder="--" v-model="p.projectText" />
        <div class="bottomLine"></div>
        <p class="label FormTit"><span></span>检查标准</p>
        <van-field readonly placeholder="--" v-model="p.checkStandard" />
        <div class="bottomLine"></div>
        <p class="label required FormTit"><span></span>检查结果</p>
        <van-field
          readonly
          placeholder="请选择"
          @click="checkResultVisible(i)"
          v-model="p.checkResultsText"
        />
      </van-cell-group>

      <van-cell-group style="margin-top: 0.1rem">
        <p class="label otherText">其他</p>
        <div class="bottomLine"></div>
        <p class="label">备注</p>
        <van-field
          v-model="buildForm.remark"
          rows="2"
          autosize
          label=""
          type="textarea"
          maxlength="500"
          placeholder="请输入备注"
          show-word-limit
        />
        <div class="bottomLine"></div>
      </van-cell-group>
      <van-cell-group>
        <upload iconType="fj" @fileChange="fileChange" :fileIds="attachment" />
      </van-cell-group>
      <div class="search-bottoms">
        <span class="btnconfirm" @click="handleSubmit()">提交</span>
      </div>
    </div>
    <van-popup v-model="visibleCheckResullt" position="bottom">
      <van-picker
        :columns="optionCheckResullt"
        @confirm="handleConfirmCheckResullt"
        @cancel="visibleCheckResullt = false"
        show-toolbar
      />
    </van-popup>
  </div>
</template>

<script>
import Navbar from "@/components/navBar/navBar_right";
import { APILX } from "@/api/requestLx";
import upload from "@/components/upload/upload";
export default {
  name: "inspectionTaskDetail", //任务详情
  components: { Navbar, upload },
  data() {
    return {
      listIndex: null,
      messDeviceCheckTaskItemList: [{}],
      attachment: "", //附件
      visibleCheckResullt: false, //检查结果弹窗
      optionCheckResullt: [
        {
          text: "正常",
          value: "0",
        },
        {
          text: "异常",
          value: "1",
        },
      ],
      buildForm: {
        remark: "",
      },
      tabActive: 0,
      parentId: "",
      detailInfo: {},
    };
  },
  computed: {},
  mounted() {},
  created() {
    this.parentId = this.$route.query.id;
    this.getDetail();
  },
  methods: {
    checkResultVisible(i) {
      this.listIndex = i;
      this.visibleCheckResullt = true;
    },
    //选检查结果
    handleConfirmCheckResullt(item) {
      this.messDeviceCheckTaskItemList[this.listIndex].checkResults =
        item.value;
      this.messDeviceCheckTaskItemList[this.listIndex].checkResultsText =
        item.text;
      this.visibleCheckResullt = false;
    },
    fileChange(ids) {
      this.attachment = ids;
    },
    goBack() {
      // 跳转到列表页
      //   this.$router.push({
      //     path: "/inspectionTaskList",
      //   });
      this.$router.go(-1);
    },
    handleSubmit() {
      for (let j = 0; j < this.messDeviceCheckTaskItemList.length; j++) {
        const md = this.messDeviceCheckTaskItemList[j];
        if (!md.checkResults) {
          this.$toast(`点巡检项目（${j + 1}）检查结果必填!`)
          return
        }
      }
      let messDeviceCheckTaskItemList = this.messDeviceCheckTaskItemList.map(
        (g, i) => {
          return {
            checkResults: g.checkResults,
            id: g.id,
          };
        }
      );
      let params = {
        id: this.parentId,
        ...this.buildForm,
        attachment: this.attachment,
        messDeviceCheckTaskItemList: messDeviceCheckTaskItemList,
      };
      console.log("检查一下参数：", params);
      APILX.messDeviceCheckTaskReport(params).then((res) => {
        this.loadingSubmit = false;
        if (res.code == 200) {
          this.$toast("检查汇报成功！");
          this.goBack();
        } else {
          this.$toast(res.message);
        }
      });
    },

    setResultTxt(item) {
      let txt = {
        0: "正常",
        1: "异常",
      };
      return txt[item["checkResults"]] || "";
    },
    /* 状态颜色 */
    setResultColor(item) {
      let colors = {
        0: "#00a854",
        1: "#f04134",
      };
      return colors[item["checkResults"]] || "";
    },
    setColor(item) {
      let colors = {
        0: "#ff9d51",
        1: "#00b042",
      };
      return colors[item["taskStatus"]] || "";
    },
    // 获取详情
    getDetail() {
      APILX.messDeviceCheckTaskQueryById(this.parentId).then((res) => {
        if (res.success) {
          this.detailInfo = res.result;
          this.attachment = res.result.attachment;
          this.buildForm.remark = res.result.remark;
          res.result.itemList.forEach((item) => {
            item.projectText = `${
              item.projectCode ? item.projectCode + "-" : ""
            }${item.projectName ? item.projectName : ""}`;
            item.checkResultsText =
              item.checkResults == "0"
                ? "正常"
                : item.checkResults == "1"
                ? "异常"
                : null;
          });
          this.messDeviceCheckTaskItemList = res.result.itemList;
        } else {
          this.$toast(res.message);
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/views/workManagement/materialRequisition/materialDetail.scss";
@import "@/assets/theme.scss";

.content {
  margin-left: 0 !important;
}
// 盘点物品样式

.left {
  width: 3.4rem !important;
}
.recordDetail {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .d-header {
    width: 100%;
    padding: 0.16rem 0.16rem 0.16rem 0.16rem;
    background: #ffffff;
    z-index: 999;
  }
}
.tabs-f {
  position: relative;
  top: 1.53rem;
}
.infoTopBox {
  background-color: #fff;
  box-sizing: border-box;
  padding: 0.16rem;
  margin-top: 0.1rem;
  .itemTopInfo {
    position: relative;
    margin-top: 0.1rem;
    font-size: 0.14rem;
    color: #888888;
    display: flex;
    &:nth-child(1) {
      margin-top: 0;
    }
    .spanLeft {
      white-space: nowrap;
    }
    .spanRight {
      flex: 1;
      color: #191f25;
      /deep/.filerows2 {
        padding-bottom: 0;
      }
      /deep/.filerows2:nth-of-type(n + 2) {
        padding-top: 0.15rem;
      }
    }
  }
}
div.infoBotBox {
  background-color: #fff;
  box-sizing: border-box;
  padding: 0.16rem;
  margin-top: 0.1rem;
  div.remarkBox {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    font-size: 0.14rem;
    color: #888888;
    display: flex;
    margin-bottom: 0.1rem;
    div.leftRemark {
      width: 0.7rem;
    }

    div.rightRemark {
      flex: 1;
      color: #191f25;
    }
  }
}
.listBox {
  height: calc(100vh - 2.5rem);
  overflow: auto;
}
div.goodBox {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  box-sizing: border-box;
  padding: 0.06rem 0;
  img.goodLeft {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 0.02rem;
  }

  div.goodRight {
    flex: 1;
    margin-left: 0.1rem;
    div.gooodName {
      width: 90%;
      font-size: 0.16rem;
      font-weight: 500;
      color: #191f25;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      margin-bottom: 0.1rem;
    }

    div.gooodCode {
      position: relative;
      margin-bottom: 0.1rem;
      span.codeBefore {
        font-size: 0.14rem;
        color: #888888;
      }

      span.goodAfter {
        display: inline-block;
        font-size: 0.16rem;
        color: #191f25;
      }
    }

    div.goodSpec {
      margin-bottom: 0.1rem;
      span.specBefore {
        font-size: 0.14rem;
        color: #888888;
      }

      span.specAfter {
        font-size: 0.16rem;
        color: #191f25;
      }
    }

    div.numberBox {
      box-sizing: border-box;
      padding: 0.1rem 0;
      border-top: 0.01rem solid #f0f0f0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      div.numTopBox {
        flex: 1;
        div.topTop {
          font-size: 0.14rem;
          color: #888888;
          margin-bottom: 0.1rem;
        }

        div.topBot {
          font-size: 0.16rem;
          color: #191f25;
        }
      }
    }
  }
}
.limitRow {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  .limitColumn {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    // color: #1890ff;
  }
}
/deep/.van-tabs__line {
  width: 67px;
}
.status {
  margin-right: 0.1rem;
}
.icon {
  display: inline-block;
  width: 0.03rem;
  height: 0.14rem;
  background: #1890ff;
  position: absolute;
  left: -0.1rem;
  top: 0.06rem;
}
.listClass {
  padding: 0 0.16rem 0 0.16rem !important ;
}

.search-content {
  padding-bottom: 0.6rem;
  width: 100%;
  flex: 1;
  background: #f5f5f5;
  overflow: scroll;
  z-index: 99;
  .formgroup {
    background: #ffffff;
    // padding: 0 0.16rem;
    margin-top: 0.1rem;
    margin-bottom: 0.2rem;
    padding-top: 0.1rem;

    .title {
      width: 0.58rem;
      height: 0.14rem;
      font-size: 0.15rem;
      font-family: PingFang SC;
      font-weight: 400;
      color: #191f25;
      line-height: 0.05rem;
      margin-left: 0.16rem;
    }
  }
}
.bottomLine {
  height: 0.01rem;
  background-color: #f0f0f0;
  margin: 0 0.16rem;
}
.otherText {
  padding-bottom: 0.16rem;
  font-size: 0.16rem;
  font-weight: bold;
  color: #191f25;
}
.haveUnitBox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding-right: 0.16rem;
  /deep/ .van-cell {
    padding-right: 0;
    width: 2.6rem;
  }
  /deep/ .van-field__control {
    max-width: 3rem;
  }
}
/deep/ .van-nav-bar {
  z-index: 99;
}
.search-bottoms {
  width: 100%;
  height: 0.5rem;
  background: #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  bottom: 0px;
  padding: 0rem 0.11rem;
  box-sizing: border-box;
  font-size: 0.16rem;
  font-weight: 500;
  z-index: 9;
  .btncancel {
    flex: 1;
    background: #f6f6f6;
    border: 0.01rem solid rgba(25, 31, 37, 0.12);
    box-sizing: border-box;
    height: 0.39rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0.03rem;
    margin-right: 0.11rem;
    color: #191f25;
  }
  .btnconfirm {
    flex: 1;
    background: #1890ff;
    box-sizing: border-box;
    height: 0.39rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0.03rem;
    color: #ffffff;
  }
}
.addgoods {
  background: #fff;
  font-size: 0.16rem;
  text-align: center;
  height: 0.5rem;
  line-height: 0.5rem;
}
</style>
